歡迎，來到第三天，我們繼續推進吧！

The first step is as good as half over.
第一步是最關鍵的一步。

進入官網 primvue官網，進入安裝指南頁面，
這次是　Nuxt專案，所以點選　Nuxt

引入　primevue 3.53.0版本

pnpm add primevue@3.53.0
pnpm add -D nuxt-primevue

專案如果認不得　pnpm

npm install -g pnpm

引入 primeVue

1. nuxt.config 設定
   modules section 增加 @primevue/nuxt-module

export default defineNuxtConfig({
     modules: [
        'nuxt-primevue'
    ],
    primevue: {
        /* Configuration */
    }
})

2.引入主題 Theme
終端機

pnpm add @primevue/themes

nuxt.config 設定

3. 自動引入Prime

primevue: {
    usePrimeVue: true
}

４.自動註冊元件。預設為 true

primevue: {
    autoImport: true
}

５. prefix
在組件和指令中使用前綴來添加註冊前綴，有助於避免名稱衝突並提高代碼的可讀性。

primevue: {
    components: {
      prefix: "p-",
    },
}

6. include
   引入 component 元件

primevue: {
    components: {
      include: [
        "button",
        "dataTable",
        "column",
        ]
    },
}

7. 安裝 主題和樣式

• 先在終端機安裝

npm install primeflex

• nuxt.config 設定

  plugins: [{ src: "~/plugins/primevue.js", ssr: false }],

• primevue.js

import { defineNuxtPlugin } from "#app";
import PrimeVue from "primevue/config";
import "primevue/resources/themes/saga-blue/theme.css"; // 主題
import "primevue/resources/primevue.min.css"; // 核心 CSS
import "primeicons/primeicons.css"; // 圖標
import "primeflex/primeflex.css"; //

export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.vueApp.use(PrimeVue);
});

設定完成後，我們開始進入 PrimeVue 世界吧~